import React, { memo, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import Scroll from '../../baseUI/scroll'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import Classify from '../../components/main/classify/Classify'
import RotationChart from '../../components/main/rotationChart/RotationChart.jsx'
import MenuBar from '../../components/main/menuBar/MenuBar.jsx'
import ImgList from '../../components/main/imgList/ImgList.jsx'
import './Main.css'
import SearchInput from '../../components/searchInput/SearchInput'
import MainPopup from '../../components/mainPopup/MainPopup'
import HomeService from '@/components/main/homeService/HomeService'
import FrameLayout from '@/components/main/frameLayout/FrameLayout'


const Main = (props) => {
  const [showPopup, setShowPopup] = useState(false)
  const history = useHistory()
  // 属性状态
  const { maindata } = props
  // action
  const { getMainDataDispatch } = props
  const { classify = [], rotationImg = [], menuBarData = {} } = maindata
  // console.log(maindata);

  useEffect(() => {
    if (!maindata.length) {
      getMainDataDispatch()
    }
  }, [])

  const handleOnclick = () => {
    // popup 组件的显示与否
    setShowPopup(!showPopup)
  }

  // 上拉加载更多
  const handlePullUp = () => {
    
  }

  // 下拉刷新
  const handlePullDown = () => {
    
  }

  return (
    <div className='main'>
      <SearchInput
        handleOnclick={() => { handleOnclick() }}
        searchBoxHandleOnclick={() => history.push('/search')}
      />
      
      <Scroll
        direction={'vertical'}
        refresh={false}
        onScroll={
          (e) => {
            // console.log(e.y)
            // if (e.y < -1142) {
            //   setDisplay(true)
            // } else {
            //   setDisplay(false)
            // }
          }
        }
        pullUp={handlePullUp}
        pullDown={handlePullDown}

      >
        <div className='main-padding'>
          <Classify classify={classify} />
          <RotationChart rotationImg={rotationImg} />
          <MenuBar menuBarData={menuBarData} />
          <ImgList />
          <HomeService />
          <FrameLayout />
        </div>
      </Scroll>

      <MainPopup handleOnclick={ handleOnclick } display={showPopup}/>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    maindata: state.main.maindata
  }
}

const mapStateToDispatch = (dispatch) => {
  return {
    getMainDataDispatch() {
      dispatch(actionTypes.getMainData())
    }
  }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(Main))